<template>
	<view class="index">
		<template v-if="isNetwork">
			<view v-if="tabbarIndex === 0 || tabbarIndex === 1" class="service-box Grid Grid--center Grid--justifyCenter Grid--1of2" style="padding: 40rpx 0 20rpx;">
				<u-status-bar></u-status-bar>
				<view class="Grid-cell Grid Grid--center Grid--justifyCenter">
					<view>
						<u-image src="https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/12.png" width="225rpx" height="167rpx" mode="aspectFill" style="margin: 0 auto;"></u-image>
						<view class="text-sm text-white text-center" style="padding: 20rpx 0;">近24小时焦点比赛分析</view>
					</view>
				</view>
				<view class="Grid-cell">
					<view v-if="isService" class="detection-box text-xs">
						<view>
							<view class="Grid Grid--center Grid--justifyCenter item">
								<view class="Grid-cell">DeepSeek-r1</view>
								<view class="op">
									<text>正在运行</text>
								</view>
							</view>
							<view class="Grid Grid--center item">
								<view class="Grid-cell">ChatGpt-3.5</view>
								<view class="op">
									<text>正在运行</text>
								</view>
							</view>
							<view class="Grid Grid--center item">
								<view class="Grid-cell">ChatGlm-6b</view>
								<view class="op">
									<text>正在运行</text>
								</view>
							</view>
							<view class="Grid Grid--center item">
								<view class="Grid-cell">Baichuan-7b</view>
								<view class="op">
									<text>正在运行</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- v-if="Object.keys(userInfo).length" -->
			<template>
				<analysis :visible="tabbarIndex === 0" />
				<competition ref="childHone" :visible="tabbarIndex === 1" />
				<my :visible="tabbarIndex === 2" />
			</template>
			
			<helang-tab-bar-roll :tabbarIndex.sync="tabbarIndex" :tabList="tabList"
				@changeTabtarIndex="changeTab"></helang-tab-bar-roll>
			<u-safe-bottom></u-safe-bottom>
		</template>
		<template v-if="!isNetwork">
			<view style="position: fixed; width: 100%; text-align: center; top: 40%; color: #666666; font-size: 14px;">
				<view>哎呀，网络信号丢失了</view>
				<view>请检查网络，或前往<text style="color: #005266; text-decoration: underline;" @click="openAppAuthorizeSetting">设置</text></view>
				<u-button type="primary" text="点击重试" style="width: 160rpx; margin-top: 10rpx;" @click="openRetry "></u-button>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import competition from './cps/competition/competition.vue'
	import Analysis from './cps/analysis/analysis.vue'
	import My from './cps/my/my.vue'
	import tabBarRoll from "@/uni_modules/helang-tabBar/components/helang-tabBar/tab-bar-roll";

	export default {
		components: {
			competition,
			Analysis,
			My,
			"helang-tab-bar-roll": tabBarRoll
		},
		data() {
			return {
				tabbarIndex: 0,
				activeColor: '#005266',
				isNetwork: true,
				isService: false,
				tabList: [
					{
						"image":"https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/1.png",
						"text":"分析",
						"image_h": "https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/1-1.png"
					},
					{
						"image":"https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/2.png",
						"text":"赛事",
						"image_h": "https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/2-1.png"
					},
					{
						"image":"https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/3.png",
						"text":"我的",
						"image_h": "https://fb-cloud.oss-cn-shenzhen.aliyuncs.com/app/3-1.png"
					},
				]
			}
		},
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo
			})
		},
		onLoad(option) {
			if (Object.keys(option).length) {
				this.tabbarIndex = option.index * 1 || 0
			}
			// 监听
			uni.$on('tabbarIndexUpdate', (data) => {
				this.tabbarIndex = data.tabbarIndex * 1 || 0
				if (!(data.tabbarIndex * 1)) {
					this.$refs.childHone.tabsChange(data.tabIndex)
					this.$refs.childHone.refreshData()
				}
			})
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: `首页`
			})
		},
		onShow() {
			this.initData()
		},
		onHide() {},
		onUnload() {},
		methods: {
			async initData() {
				const self = this
				uni.getNetworkType({
					success: function (res) {
						if(res.networkType == 'none') {
							self.isNetwork = false
						}
					}
				});
				
				this.isService = true
				setTimeout(() => {
					let times = {
						0: ((Math.floor(Math.random() * (5000 - 1000 + 1) + 1000))/1000).toFixed(1) * 1,
						1: ((Math.floor(Math.random() * (5000 - 1000 + 1) + 1000))/1000).toFixed(1) * 1,
						2: ((Math.floor(Math.random() * (5000 - 1000 + 1) + 1000))/1000).toFixed(1) * 1,
						3: ((Math.floor(Math.random() * (5000 - 1000 + 1) + 1000))/1000).toFixed(1) * 1,
					}
					const divs = document.querySelectorAll('.detection-box .item');
					const ops = document.querySelectorAll('.detection-box .item .op');
					// let _s = ((Math.floor(Math.random() * (3000 - 1000 + 1) + 1000))/1000).toFixed(1) * 1
					let _s = 0
					divs.forEach((div, index) => {
						_s += times[index]
						div.style.animationDelay = `${_s}s`;
					});
					let _o = 0
					ops.forEach((div, index) => {
						_o += times[index]
						div.style.animationDelay = `${_o}s`;
					});
				}, 0)
				
				await this.$store.dispatch('login/userinfoAction');
			},
			changeTab(e) {
				this.tabbarIndex = e
				this.$forceUpdate()
			},
			openRetry() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
			openAppAuthorizeSetting() {
				uni.openAppAuthorizeSetting({
				  success (res) {
				    console.log(res)
				  }
				})
			},
		},
		beforeDestroy() {
			console.log("-销毁uni.$on tabbarIndexUpdate-")
			// uni.$off("tabbarIndexUpdate")
			console.log("-销毁成功！！！-")
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100vh;
	}
	.service-box {
		width: 100%;
		// height: 338rpx;
		background: #0DA25F;
	}
	.detection-box {
		padding: 0 34rpx;
	}
	.detection-box .item {
		opacity: 1;
		animation: fadeIn 1s ease-in-out forwards;
		margin-bottom: 15rpx;
		background: linear-gradient( 90deg, #FFFFFF 0%, #FFFFFF 47%, #FFFFFF 100%);
		border-radius: 24px;
		height: 48rpx;
		line-height: 48rpx;
		padding: 0 20rpx;
	}
	.detection-box .item .op {
		opacity: 0;
		animation: fadeInOp 1s ease-in-out forwards;
	}
	@keyframes fadeIn {
		from {
			color: #222222;
		}
	
		to {
			color: #0DA25F;
		}
	}
	@keyframes fadeInOp {
		from {
			opacity: 0;
		}
	
		to {
			opacity: 1;
		}
	}
	// @media screen and (max-width: 750px) {
	
	// }
	// @media screen and (min-width: 750px) {
	
	// }
</style>